<template>
    <div class="header">
      <el-row>
        <el-col :span="20" class="text-center-center" style="height: calc(8vh)">vue-admin</el-col>
        <el-col :span="4" class="text-right-bottom" style="height: calc(8vh)">
          <span>欢迎 : {{username}} &nbsp;&nbsp; </span>
          <a @click.prevent="logout">退出</a>
          <!--<el-button type="text" @click="logout">退出</el-button>-->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"  class="text-left-center" style="height: calc(5vh);vertical-align: center">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">
              <span>{{item.name}}</span>
              <!-- todo 改变链接没有成功 -->
              <router-link :to="item.path"></router-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {setUser} from '@/utils/session'

export default {
  name: 'Header',
  data () {
    return {
      breadcrumb: []
    }
  },
  computed: {
    ...mapGetters(['username', 'userId', 'token', 'roles', 'resources'])
  },
  watch: {
    '$route' () {
      this.breadcrumb = this.$router.currentRoute.matched
    }
  },
  mounted: function () {
    // console.log(this.$router.currentRoute.matched)
    this.breadcrumb = this.$router.currentRoute.matched
    // this.$router.currentRoute.matched.forEach((item) => {
    //   console.log(item.name)
    // })
  },
  methods: {
    logout: function () {
      // 先清 sessionStore
      setUser({})
      // 再触发 actions操作
      this.setUserId('')
      this.setUserName('')
      this.setToken('')
      this.setRoles([])
      this.setResources([])
      this.$router.push({path: '/login'})
    },
    ...mapActions(['setUserId', 'setUserName', 'setToken', 'setRoles', 'setResources'])
  }
}
</script>

<style scoped>
.text-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-left-center {
  display: flex;
  justify-content: left;
  align-items: center;
}
.text-right-bottom {
  display: flex;
  justify-content: right;
  align-items: flex-end;
}
.header {
  border-bottom: 1px solid olivedrab;
  margin-bottom: 5px;
}
</style>
